import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Button, Alert, message, Modal } from 'antd'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { ApproveBlock, Header, Line, Cell, Footer, TextLine, TextCell } from '@components/ApprovePre/Approve'
import SelectSecretary from './SelectSecretary'
const { Item } = Form
const { confirm } = Modal
class EmergencyProcesser extends Component {
  state = {
    secretarySelectorVisible: false,
    secretaryid: ''
  }

  formRef=React.createRef()

  // 二次确认操作
  confirmAction (content, callback) {
    if (!this.props.agreeAgain) {
      return callback()
    }
    confirm({
      icon: <ExclamationCircleOutlined />,
      content,
      onOk () {
        callback()
      }
    })
  }

  submitRequest ({ processer, processerid }) {
    const hide = message.loading('指定紧急秘书中', 120)
    this.$put('/api/xapc/case/emergencyprocesser', {
      caseid: this.props.caseDetail.id,
      processerid,
      processer
    }).then(res => {
      hide()
      if (res.status === 1) {
        this.props.refreshCaseData()
      } else {
        message.warning(res.message)
      }
    }).catch(() => hide())
  }

  // 判断当事人的证件信息是否完善
  isPartyInfoFull () {
    const { applicants, respondents } = this.props.caseDetail
    const list = [...applicants, ...respondents].filter(li => li.status)
    for (let i = 0; i < list.length; i++) {
      const li = list[i]
      if (!li.license) {
        return false
      }
    }
    return true
  }

  // 判断是否要去完善信息
  confirmToInfo () {
    if (!this.props.caseDetail.id) {
      return setTimeout(() => {
        this.confirmToInfo()
      }, 100)
    }
    const isCaseFull = this.props.caseDetail.cause_action
    const isPartyFull = this.isPartyInfoFull()
    const ms = []
    if (!isCaseFull) {
      ms.push('案件信息')
    }
    if (!isPartyFull) {
      ms.push('当事人证件信息')
    }
    if (!isCaseFull || !isPartyFull) {
      confirm({
        icon: <ExclamationCircleOutlined />,
        content: `请先完善${ms.join('和')}`,
        okText: '去完善信息',
        cancelText: '取消',
        onOk: () => {
          this.props.toFullInfo()
        },
        onCancel: () => {
          this.props.close()
        }
      })
    }
  }

  componentDidMount () {
    this.confirmToInfo()
  }

  renderInput () {
    const { id } = this.props.caseDetail
    const { secretarySelectorVisible, secretaryid } = this.state
    const setSecretary = (o) => {
      const { employee, employeeid } = o
      this.formRef.current.setFieldsValue({
        processer: employee,
        processerid: employeeid
      })
      this.setState({
        secretaryid: employeeid
      })
    }
    return (
      <ApproveBlock>
        <SelectSecretary caseid={id} visible={secretarySelectorVisible} value={secretaryid} hide={() => this.setState({ secretarySelectorVisible: false })} changeSecretary={o => setSecretary(o)} />
        <Header title='指定紧急秘书' />
        <Form name='emergency-processer' ref={this.formRef} onFinish={d => this.confirmAction('您确定要指定紧急秘书吗？', this.submitRequest.bind(this, d))}>
          <Line>
            <Cell>
              <Item name='processerid' noStyle><span /></Item>
              <Item name='processer' label='紧急秘书'>
                <Input placeholder='请选择秘书' readOnly onClick={() => this.setState({ secretarySelectorVisible: true })} />
              </Item>
            </Cell>
          </Line>
          <Footer>
            <Line>
              <Cell style={{ width: '100%', textAlign: 'right' }}><Button type='primary' htmlType='submit'>确定</Button></Cell>
            </Line>
          </Footer>
        </Form>

      </ApproveBlock>
    )
  }

  renderHistory () {
    return (
      <ApproveBlock>
        <Header title='指定紧急秘书' />
        <TextLine>
          <TextCell>紧急秘书：{this.props.caseDetail.emergency_processer}</TextCell>
        </TextLine>
      </ApproveBlock>
    )
  }

  render () {
    if (!this.props.caseDetail.id) {
      return null
    }
    const { emergency_processerid: id, emergency_processer: name } = this.props.caseDetail
    if (!this.props.editable) {
      return <Alert message='无操作权限' type='warning' showIcon />
    }
    const isCaseFull = this.props.caseDetail.cause_action
    const isPartyFull = this.isPartyInfoFull()
    const ms = []
    if (!isCaseFull) {
      ms.push('案件信息')
    }
    if (!isPartyFull) {
      ms.push('当事人证件信息')
    }
    if (!isCaseFull || !isPartyFull) {
      return (
        <Alert
          message={`请先完善${ms.join('和')}`}
          type='warning'
          showIcon
        />
      )
    }
    if (!id && !name) {
      return this.renderInput()
    }
    return this.renderHistory()
  }
}

EmergencyProcesser.propTypes = {
  caseDetail: PropTypes.object,
  // active: PropTypes.bool,
  // refreshCaseData: PropTypes.func,
  editable: PropTypes.bool
}
EmergencyProcesser.defaultProps = {
  caseDetail: {},
  // active: false,
  refreshCaseData: () => {},
  editable: false
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(EmergencyProcesser)
